<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设计师后台管理</title>
<!-- 引入layui的样式文件和脚本文件 -->
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<!-- 表格容器 -->
	<table id="demo" lay-filter="test"></table>
	<!-- 工具栏  头部 -->
	<script type="text/html" id="toolbarDemo1">
 	 <div class="layui-btn-container">
   			 <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
 	 </div>
	</script>
	<!-- 工具栏  行内 -->
	<script type="text/html" id="toolbarDemo2">
			<div class="layui-btn-container">
		    <button class="layui-btn layui-btn-sm" lay-event="update"><i class="layui-icon">&#xe642;</i>编辑</button>
  			<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</button>
		  </div>
		</script>
	<!--添加功能的div  -->
	<div id="addDiv" style="display: none;">
		<form class="layui-form" style="width: 400px;" id="addForm">
			<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
			<div class="layui-form-item">
				<label class="layui-form-label">设计师姓名</label>
				<div class="layui-input-inline">
					<input type="text" name="name" lay-verify="required"
						placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">设计师职位</label>
				<div class="layui-input-inline">
					<input type="text" name="position" lay-verify="required"
						placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" name="url">url</label>
				<div class="layui-input-inline">
					<!-- 上传图片按钮 -->
					<button type="button" class="layui-btn" id="test1">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<!-- 展示上传成功的图片 -->
					<img id="showImg" src="" width="50">
					<!-- 用来储存上传成功之后的图片路径 -->
					<input type="text" name="url" id="url" required
						lay-verify="required" placeholder="请输入标题" autocomplete="off"
						class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="addsubBtn">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
			<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
		</form>
	</div>
	<!--修改功能的div  -->
	<div id="updDiv" style="display: none;">
		<form class="layui-form" style="width: 400px;" lay-filter="updForm"
			id="form001">
			<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
			<div class="layui-form-item">
				<label class="layui-form-label">id</label>
				<div class="layui-input-inline">
					<input type="text" name="id" placeholder="请输入" autocomplete="off"
						class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">设计师姓名</label>
				<div class="layui-input-inline">
					<input type="text" name="name" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">设计师职位</label>
				<div class="layui-input-inline">
					<input type="text" name="position" placeholder="请输入"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" name="url">添加头像</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="test2">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<!-- 展示上传成功的图片 -->
					<img id="showImg2" src="" width="50">
					<!-- 回显图片地址 -->
					<input type="text" name="url" id="url2" required
						lay-verify="required" placeholder="请输入标题" autocomplete="off"
						class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="updsubBtn">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>


	<script>
		layui.use([ 'table', 'form', 'layer', 'upload' ], function() {
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
			var upload = layui.upload;
			var $ = layui.$;
			
			//第一个实例
			table.render({
				elem : '#demo',
				height : 312,
				url : 'DesingerServletAdmin?method=getDesingers', //数据接口
				page : true, //开启分页
				toolbar : '#toolbarDemo1',
				id : 'idTest',
				cols : [ [ //表头
				{
					field : 'id',
					title : 'ID',
					width : 80,
					sort : true,
					fixed : 'left'
				}, {
					field : 'url',
					title : '图片地址',
					width : 180,
					templet : function(d) {
						return '<img width="30" src="../'+d.url+'"/>'
					}
				},{
					field : 'name',
					title : '职位',
					width : 180
				}, {
					field : 'position',
					title : '职位',
					width : 180
				}, {
					title : '操作',
					width : 177,
					toolbar : '#toolbarDemo2'
				}] ]
			});//表格渲染結束
			
			//监听事件--头部工具栏
			table.on('toolbar(test)', function(obj) {
				if (obj.event == "add") {
					// layer.msg('添加');
					layer.open({
						type : 1,
						area : [ '400px', '400px' ],
						content : $('#addDiv')
					//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});
				}
			});
			//监听事件--行内工具栏
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				var index = layui.index;
				switch (obj.event) {
				case 'update':
					//给表单赋值
					layer.open({
						type : 1,
						shadeClose : true,
						area : [ '400px', '400px' ],
						content : $('#updDiv')
					});
					form.val("updForm", data);
					$("#showImg2").attr("src", "../" + data.url);
					break;
				case 'delete':
					layer.msg('删除');
					layer.confirm('真的删除行么', function(index) {
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);
						//向服务端发送删除指令
						$.post('DesingerServletAdmin?method=delDesingers', {
							'id' : data.id

						}, function(res) {

							layer.msg(res.msg);
						}, 'json')
					});
					break;
				}
			});
			/* 监听提交事件-----添加*/
			form.on('submit(addsubBtn)', function(data) {
				//通过Ajax方式提交，根据结果进行跳转的页面，或者不提交
				$.post("DesingerServletAdmin?method=addDesingers", data.field,
						function(res) {
							console.log(res);
							if (res.code == 0) {
								layer.msg(res.msg, {
									time : 1000
								}, function() {
									layer.closeAll();//关闭弹窗
									table.reload('idTest', {});//表格重载

								})
							}
						}, 'json');

				return false;
			});
			/* 提交的监听事件-----更新*/
			form.on('submit(updsubBtn)', function(data) {
				//通过Ajax方式提交，根据结果进行跳转的页面，或者不提交
				var url = "DesingerServletAdmin?method=updDesingers";
				var str = $("#form001").serialize(); //请求参数，表格中的数据 serialize序列化
				console.log(str);
				$.post(url, str, function(res) {
					console.log(res);
					layer.msg(res.msg, function() {
						layer.closeAll(); //关闭弹窗
						table.reload('idTest', {});//重载
					})
				}, 'json');
				return false; //禁止提交
			});

			//图片上传执行实例---添加
			var uploadInst = upload.render({//upload.render表示渲染
				elem : '#test1',//绑定元素
				url : 'ImgServletAdmin?method=uploadImg', //上传接口
				done : function(res) {
					//上传完毕回调
					console.log(res);
					if (res.code == 0) {
						$("#showImg").attr("src", "../images/" + res.data);//展示图片
						$("#url").val("images/" + res.data);//url的路径
					}
				},
				error : function() {
					//请求异常回调
				}
			});//图片上传执行实例结束

			//图片上传执行实例---修改
			var uploadInst = upload.render({//upload.render表示渲染
				elem : '#test2',//绑定元素
				url : 'ImgServletAdmin?method=uploadImg', //上传接口
				done : function(res) {
					//上传完毕回调
					console.log(res);
					if (res.code == 0) {
						$("#showImg2").attr("src", "../images/" + res.data);//展示图片
						$("#url2").val("images/" + res.data);//url的路径
					}
				},
				error : function() {
					//请求异常回调
				}
			});//图片修改执行实例结束

			
		});
	</script>

</body>
</html>